import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
import {store} from '@/store'
import {isMobile} from "@/utils";

// setup
export const useScreen = defineStore("screen", () => {
	const screenWidth = ref(window.screen.width)
	const screenHeight = ref(window.screen.height)
	const device = ref('desktop')
	
	/**
	 * 更新屏幕尺寸
	 */
	function updateScreenSize(){
		screenWidth.value = window.screen.width;
		screenHeight.value = window.screen.height;
	}
	
	/**
	 * 更新屏幕尺寸
	 */
	function updateDevice(){
		if(isMobile()){
			device.value = 'mobile'
		}else{
			device.value = 'desktop'
		}
		updateScreenSize()
	}
	
	/**
	 * 设置屏幕高度
	 */
	function setScreenHeight(height){
		screenHeight.value = height
	}
	
	/**
	 * 设置屏幕宽度
	 */
	function setScreenWidth(width){
		screenWidth.value = width
	}
	
	/**
	 * 获取屏幕尺寸
	 */
	function getScreenSize(){
		screenWidth.value = window.screen.width
		screenHeight.value = window.screen.height
		return {screenWidth,screenHeight}
	}
	
	/**
	 * 监听屏幕
	 */
	function listenScreenSize() {
		window.addEventListener('resize', () => {
			updateDevice();
		})
	}
	
	/**
	 * 监听横屏/竖屏
	 */
	function listenOrientationChange(){
		window.addEventListener('orientationchange', () => {
			updateDevice()
		})
	}
	
	return {
		listenOrientationChange,
		listenScreenSize,
		updateScreenSize,
		updateDevice,
		getScreenSize,
		setScreenHeight,
		setScreenWidth,
		screenWidth,
		screenHeight,
		device
	}
})

export function useScreenHook() {
	return useScreen(store);
}
